<template>
  <div  id="newmain2">

    <center><h2>收支渠道</h2></center>


   <div
      id="main"
    ></div>

  </div>
</template>
<script>

import { getCash } from '../../api/incomeAndExpenses/statistics'
import { getWeChat } from '../../api/incomeAndExpenses/statistics'
import { getAlipay } from '../../api/incomeAndExpenses/statistics'




export default {
   components: {
     
   },
   mixins: [],
   props: {
     
   },
   data() {
     return {
       
     }
   },
   computed: {
     
   },
   watch: {
     
   },
   mounted() {

      var cash=0;

      var wechat=0;

      var alipay=0;



    getCash().then(rep =>{

      cash=rep.data
      

      getWeChat().then(rep =>{

      wechat= rep.data


      getAlipay().then(rep =>{

        alipay=rep.data


        this.show(cash,wechat,alipay)


        })

      })

    })


     
   },
   methods: {

    show(cash,wechat,alipay){

      var myChart = this.$echarts.init( document.getElementById('main'));

      myChart.setOption({

        tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 15,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: cash, name: '现金收入' },
        { value: wechat, name: '微信' },
        { value: alipay, name: '支付宝' },
      ]
    }
  ]
      })


    }
     
   }
};
</script>
<style  scoped>

#main{

  /* position: absolute; left: 500px; top: 40px;  */

  /* display: inline-block; */
  margin-left: 45px; 


  width: 400px;   height: 280px;


}
#newmain2{

/* position: absolute; left: 500px; top: 40px;  */

display: inline-block;

/* width: 400px; height: 300px */

}


</style>